<template>
    <div class="tabContainer">
        <div class="collapse-btn" @click="collapseChage">
            <el-icon v-if="sidebar.collapse">
                <Expand />
            </el-icon>
            <el-icon v-else>
                <Fold />
            </el-icon>
        </div>
    
        <div class="tabs-container">
            
            <el-tabs v-model="activePath" class="tabs" type="card" closable @tab-click="clickTabls" @tab-remove="closeTabs">
                <el-tab-pane
                    v-for="item in tabs.list"
                    :key="item.path"
                    :label="item.title"
                    :name="item.path"
                    @click="setTags(item)"
                ></el-tab-pane>
            </el-tabs>
            <div class="Tabs-close-box">
                <el-dropdown @command="handleTags">
                    <el-button size="small" type="primary" plain>
                        标签选项
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu size="small">
                            <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                            <el-dropdown-item command="current">关闭当前</el-dropdown-item>
                            <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useTabsStore } from '../store/tabs';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { useSidebarStore } from '../store/sidebar';

const route = useRoute();
const router = useRouter();
const activePath = ref(route.fullPath);
const tabs = useTabsStore();

const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
    sidebar.handleCollapse();
};

onMounted(() => {
    if (document.body.clientWidth < 1500) {
        collapseChage();
    }
});
// 设置标签
const setTags = (route: any) => {
    if (route.name === 'galssOrder-orderInfoDetail') return
    const isExist = tabs.list.some((item) => {
        return item.path === route.fullPath;
    });
    if (!isExist) {
        tabs.setTabsItem({
            name: route.name,
            title: route.meta.title,
            path: route.fullPath,
        });
    }
};
setTags(route);
onBeforeRouteUpdate((to) => {
    setTags(to);
});

// 关闭全部标签
const closeAll = () => {
    tabs.clearTabs();
    router.push('/');
};
// 关闭其他标签
const closeOther = () => {
    const curItem = tabs.list.filter((item) => {
        return item.path === route.fullPath;
    });
    tabs.closeTabsOther(curItem);
};
const handleTags = (command: string) => {
    switch (command) {
        case 'current':
            // 关闭当前页面的标签页
            tabs.closeCurrentTag({
                $router: router,
                $route: route,
            });
            break;
        case 'all':
            closeAll();
            break;

        case 'other':
            closeOther();
            break;
    }
};

const clickTabls = (item: any) => {
    router.push(item.props.name);
};
const closeTabs = (path: string) => {
    const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
    let jumpUrl =  userInfo.role_list[0].children.length ? userInfo.role_list[0].children[0].m_url :  userInfo.role_list[0].m_url
    const index = tabs.list.findIndex((item) => item.path === path);
    tabs.delTabsItem(index);
    const item = tabs.list[index] || tabs.list[index - 1];
    router.push(item ? item.path : jumpUrl);
};

watch(
    () => route.fullPath,
    (newVal, oldVal) => {
        activePath.value = newVal;
    }
);
</script>

<style>

.tabContainer{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
    background: #fff;
    width: 100%;
}
.tabs-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 2px 120px 0 0;
}
.collapse-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    opacity: 0.8;
    font-size: 22px;
}

.collapse-btn:hover {
    opacity: 1;
}

.tabs {
    transform: none;
}
.el-tabs__header {
    margin-bottom: 0;
}

.el-tabs__nav {
    height: 28px;
}

.el-tabs__nav-next,
.el-tabs__nav-prev {
    line-height: 32px;
}
.tabs.el-tabs {
    --el-tabs-header-height: 28px;
}

.Tabs-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}
</style>
